/*
 * Tencent is pleased to support the open source community by making ovCompose available.
 * Copyright (C) 2025 THL A29 Limited, a Tencent company. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.tencent.compose.sample.mainpage

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowForward
import androidx.compose.material.icons.filled.Info
import androidx.compose.material.icons.filled.List
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.tencent.compose.sample.navigation.SimpleNavController
import com.tencent.compose.sample.navigation.NavDestination
import com.tencent.compose.sample.navigation.NavGraph
import com.tencent.compose.sample.breakpoint.BreakpointDemo
import com.tencent.compose.sample.mediaquery.MediaQueryDemo
import com.tencent.compose.sample.caniuse.CanIUseDemo

/**
 * Demo 数据类
 */
data class DemoItem(
    val id: String,
    val title: String,
    val description: String,
    val icon: ImageVector,
    val destination: NavDestination
)

/**
 * 主页面 - 展示所有 Demo 的列表
 */
@Composable
fun MainPage() {
    // 创建导航控制器
    val currentDestination = remember { mutableStateOf(NavDestination.HOME) }
    val navController = remember { SimpleNavController(currentDestination) }

    // 定义 Demo 列表
    val demos = remember {
        listOf(
            DemoItem(
                id = "breakpoint",
                title = "断点系统演示",
                description = "展示响应式断点系统的各种用例：响应式网格、自适应排版、组合断点、断点信息、高级 API 等",
                icon = Icons.Default.Info,
                destination = NavDestination.BREAKPOINT
            ),
            DemoItem(
                id = "mediaquery",
                title = "媒体查询演示",
                description = "展示 CMP 媒体查询系统:设备类型查询、深色模式、屏幕方向、复杂条件组合、动态响应等特性",
                icon = Icons.Default.Info,
                destination = NavDestination.MEDIA_QUERY
            ),
            DemoItem(
                id = "caniuse",
                title = "CanIUse 能力检测",
                description = "演示系统能力检测功能，检测设备是否支持特定的 SystemCapability，包括 ArkUI、多模输入、图形渲染等能力",
                icon = Icons.Default.List,
                destination = NavDestination.CANIUSE
            )
        )
    }

    // 导航图
    NavGraph(
        navController = navController,
        homeScreen = {
            // 主页列表
            Scaffold(
                topBar = {
                    TopAppBar(
                        title = { Text("Compose Multiplatform 演示") },
                        backgroundColor = MaterialTheme.colors.primaryVariant,
                        contentColor = MaterialTheme.colors.onPrimary
                    )
                }
            ) { paddingValues ->
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(paddingValues)
                ) {
                    // 欢迎卡片
                    Card(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(16.dp),
                        backgroundColor = MaterialTheme.colors.primaryVariant
                    ) {
                        Column(
                            modifier = Modifier.padding(20.dp)
                        ) {
                            Text(
                                text = "欢迎使用",
                                style = MaterialTheme.typography.h6,
                                fontWeight = FontWeight.Bold,
                                color = MaterialTheme.colors.onPrimary
                            )
                            Spacer(modifier = Modifier.height(8.dp))
                            Text(
                                text = "这是 Compose Multiplatform 跨平台组件演示应用，展示了断点系统、自适应 Tabs 组件和媒体查询系统的功能。",
                                style = MaterialTheme.typography.body1,
                                color = MaterialTheme.colors.onPrimary.copy(alpha = 0.8f)
                            )
                            Spacer(modifier = Modifier.height(4.dp))
                            Text(
                                text = "点击下方的演示项目开始体验 👇",
                                style = MaterialTheme.typography.body2,
                                color = MaterialTheme.colors.primary,
                                fontWeight = FontWeight.Medium
                            )
                        }
                    }

                    // Demo 列表
                    Text(
                        text = "演示列表",
                        style = MaterialTheme.typography.subtitle1,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)
                    )

                    LazyColumn(
                        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
                        verticalArrangement = Arrangement.spacedBy(12.dp)
                    ) {
                        items(demos) { demo ->
                            DemoListItem(
                                demo = demo,
                                onClick = { navController.navigate(demo.destination) }
                            )
                        }
                    }
                }
            }
        },
        breakpointScreen = {
            // 断点 Demo 页面
            BreakpointDemo(
                onBackClick = { navController.navigateBack() }
            )
        },
        mediaQueryScreen = {
            // 媒体查询 Demo 页面
            MediaQueryDemo(
                onBackClick = { navController.navigateBack() }
            )
        },
        canIUseScreen = {
            // CanIUse 能力检测 Demo 页面
            CanIUseDemo(
                onBackClick = { navController.navigateBack() }
            )
        }
    )
}

/**
 * Demo 列表项
 */
@Composable
private fun DemoListItem(
    demo: DemoItem,
    onClick: () -> Unit
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .clickable(onClick = onClick),
        backgroundColor = MaterialTheme.colors.surface,
        elevation = 2.dp
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // 图标
            Surface(
                modifier = Modifier.size(48.dp),
                shape = MaterialTheme.shapes.medium,
                color = MaterialTheme.colors.primary.copy(alpha = 0.1f)
            ) {
                Box(contentAlignment = Alignment.Center) {
                    Icon(
                        imageVector = demo.icon,
                        contentDescription = null,
                        tint = MaterialTheme.colors.primary,
                        modifier = Modifier.size(28.dp)
                    )
                }
            }

            Spacer(modifier = Modifier.width(16.dp))

            // 标题和描述
            Column(
                modifier = Modifier.weight(1f)
            ) {
                Text(
                    text = demo.title,
                    style = MaterialTheme.typography.subtitle1,
                    fontWeight = FontWeight.Bold,
                    color = MaterialTheme.colors.onSurface
                )
                Spacer(modifier = Modifier.height(4.dp))
                Text(
                    text = demo.description,
                    style = MaterialTheme.typography.body2,
                    color = MaterialTheme.colors.onSurface.copy(alpha = 0.7f),
                    lineHeight = 18.sp
                )
            }

            Spacer(modifier = Modifier.width(12.dp))

            // 箭头图标
            Icon(
                imageVector = Icons.AutoMirrored.Filled.ArrowForward,
                contentDescription = "进入",
                tint = MaterialTheme.colors.primary,
                modifier = Modifier.size(24.dp)
            )
        }
    }
}
